<template>
    <navigation></navigation>
    <div class="min-h-screen bg-gray-50 py-12">
        <!-- 主内容区域 -->
        <div class="max-w-7xl mx-auto px-4 mt-12">
            <!-- 标题区域 -->
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-3xl font-bold">课程中心</h2>
                <div class="relative">
                    <input type="text" placeholder="搜索课程..." class="pl-10 pr-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
                    <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>
            
            <!-- 分类和内容区域 -->
            <div class="flex gap-6">
                <!-- 左侧课程分类 -->
                <div class="w-1/5">
                    <div class="bg-white rounded-lg shadow-lg p-4 sticky top-24">
                        <h3 class="text-xl font-semibold mb-4">课程分类</h3>
                        <ul class="space-y-2">
                            <li>
                                <button 
                                    @click="selectedCategory = 'all'"
                                    :class="selectedCategory === 'all' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                                    class="w-full py-2 px-4 rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white"
                                >
                                    <i class="fa fa-th-large mr-2"></i>全部课程
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectedCategory = 'frontend'"
                                    :class="selectedCategory === 'frontend' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                                    class="w-full py-2 px-4 rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white"
                                >
                                    <i class="fa fa-code mr-2"></i>前端开发
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectedCategory = 'ai'"
                                    :class="selectedCategory === 'ai' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                                    class="w-full py-2 px-4 rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white"
                                >
                                    <i class="fa fa-robot mr-2"></i>人工智能
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectedCategory = 'database'"
                                    :class="selectedCategory === 'database' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                                    class="w-full py-2 px-4 rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white"
                                >
                                    <i class="fa fa-database mr-2"></i>数据库
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectedCategory = 'backend'"
                                    :class="selectedCategory === 'backend' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                                    class="w-full py-2 px-4 rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white"
                                >
                                    <i class="fa fa-server mr-2"></i>后端开发
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectedCategory = 'java'"
                                    :class="selectedCategory === 'java' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                                    class="w-full py-2 px-4 rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white"
                                >
                                    <i class="fa fa-coffee mr-2"></i>Java开发
                                </button>
                            </li>
                        </ul>
                        
                        <!-- 热门标签 -->
                        <div class="mt-8">
                            <h3 class="text-xl font-semibold mb-4">热门标签</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 transition-colors cursor-pointer">#Python</span>
                                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 transition-colors cursor-pointer">#Vue.js</span>
                                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 transition-colors cursor-pointer">#React</span>
                                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 transition-colors cursor-pointer">#机器学习</span>
                                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 transition-colors cursor-pointer">#SpringBoot</span>
                                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 transition-colors cursor-pointer">#MySQL</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧内容区域 -->
                <div class="w-4/5">
                    <!-- 推荐课程 -->
                    <div class="mb-12">
                        <h2 class="text-2xl font-bold mb-6">推荐课程</h2>
                        <swiper :modules="swiperModules" :slides-per-view="3" :space-between="30" :pagination="{ clickable: true }"
                            :autoplay="{ delay: 3000 }" class="mySwiper">
                            <swiper-slide v-for="course in filteredRecommendedCourses" :key="course.id">
                                <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                                    <div class="h-48 w-full overflow-hidden">
                                        <img :src="course.image || 'https://picsum.photos/400/300'" :alt="course.title" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                                    </div>
                                    <div class="p-6">
                                        <div class="flex justify-between items-center mb-2">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">{{ course.level }}</span>
                                            <span class="text-gray-500 text-sm"><i class="fa fa-users mr-1"></i>{{ course.students || 0 }}</span>
                                        </div>
                                        <h3 class="text-xl font-semibold mb-2">{{ course.title }}</h3>
                                        <p class="text-gray-600 mb-4 line-clamp-2">{{ course.description }}</p>
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <img :src="course.teacherAvatar || 'https://picsum.photos/32/32'" :alt="course.teacher" class="w-8 h-8 rounded-full mr-2">
                                                <span class="text-gray-600 text-sm">{{ course.teacher || '未知讲师' }}</span>
                                            </div>
                                            <span class="text-lg font-bold text-blue-600">¥{{ course.price || 0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </swiper-slide>
                        </swiper>
                    </div>
                    
                    <!-- 课程列表 -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-2xl font-bold">全部课程</h2>
                            <div class="flex items-center gap-4">
                                <span class="text-sm text-gray-500">共 {{ filteredCourses.length }} 门课程</span>
                                <div class="flex items-center">
                                    <label for="sort" class="text-sm text-gray-600 mr-2">排序:</label>
                                    <select id="sort" v-model="sortType" class="border rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="default">默认</option>
                                        <option value="priceAsc">价格从低到高</option>
                                        <option value="priceDesc">价格从高到低</option>
                                        <option value="students">人气优先</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div v-for="course in filteredCourses" :key="course.id" @click="jump(course.id)" class="bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer">
                                <div class="relative h-48 w-full overflow-hidden">
                                    <img :src="course.image || 'https://picsum.photos/400/300'" :alt="course.title" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                                    <div class="absolute top-3 left-3">
                                        <span class="px-2 py-1 bg-blue-500 text-white text-xs rounded-full">{{ course.category || '未知分类' }}</span>
                                    </div>
                                </div>
                                <div class="p-5">
                                    <h3 class="text-xl font-semibold mb-2 line-clamp-1">{{ course.title }}</h3>
                                    <p class="text-gray-600 mb-4 text-sm line-clamp-2">{{ course.description || '暂无描述' }}</p>
                                    <div class="flex justify-between items-center">
                                        <div class="flex items-center">
                                            <img :src="course.teacherAvatar || 'https://picsum.photos/32/32'" :alt="course.teacher" class="w-8 h-8 rounded-full mr-2">
                                            <span class="text-gray-600 text-sm">{{ course.teacher || '未知讲师' }}</span>
                                        </div>
                                        <span class="text-lg font-bold text-blue-600">¥{{ course.price || 0 }}</span>
                                    </div>
                                    <div class="mt-4 flex justify-between items-center text-sm text-gray-500">
                                        <span><i class="fa fa-clock-o mr-1"></i>{{ course.duration || '未知时长' }}</span>
                                        <span><i class="fa fa-users mr-1"></i>{{ course.students || 0 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 分页 -->
                        <div class="flex justify-center mt-10">
                            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                                :page-sizes="[6, 9, 12, 15]" :total="filteredCourses.length"
                                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" class="!rounded-button" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, inject } from "vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { useRouter } from "vue-router";
import { Pagination, Autoplay } from 'swiper/modules';
import { getAllcourse, getRecomment } from "../../api/student/course/course";
import navigation from '../../views/navigation.vue'

const router = useRouter()
const swiperModules = [Pagination, Autoplay];

// 课程分类状态
const selectedCategory = ref('all');
const sortType = ref('default');

// 课程数据
const recommendedCourses = ref([
    {
        id: 1,
        title: '高级前端开发工程师培训课程',
        description: '深入学习现代前端开发技术栈，掌握Vue3、React、TypeScript等热门技术，打造完整的前端开发技能体系。',
        image: 'https://ai-public.mastergo.com/ai/img_res/ddeb1ccbef2ce016c7ab2c2fbcd86fc8.jpg',
        level: '高级',
        duration: '48课时',
        price: 2999,
        students: 2345,
        teacher: '张晓峰',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/13a5df8738cf4a2a44f3ad27fa647fa9.jpg',
        category: '前端开发'
    },
    {
        id: 2,
        title: '人工智能与机器学习实战',
        description: '从零开始学习人工智能和机器学习，通过实际项目案例，掌握AI算法和深度学习技术。',
        image: 'https://ai-public.mastergo.com/ai/img_res/0b45f30ffb9798639adb3c0ab2d8d6f8.jpg',
        level: '中级',
        duration: '36课时',
        price: 3999,
        students: 1876,
        teacher: '刘雨薇',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/a3779f3f27bef68f58be8debfdd303ac.jpg',
        category: '人工智能'
    },
    {
        id: 3,
        title: '区块链技术与应用开发',
        description: '系统学习区块链核心技术，包括智能合约开发、DApp应用开发等，成为区块链技术专家。',
        image: 'https://ai-public.mastergo.com/ai/img_res/a9ee378153e67e7bfe481e8ecc52c7dd.jpg',
        level: '高级',
        duration: '42课时',
        price: 4999,
        students: 1254,
        teacher: '陈思远',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/54b4075ba6c564464cd89e5d1711a5b9.jpg',
        category: '区块链'
    }
]);

const courses = ref([
    {
        id: 1,
        title: 'Python数据分析与可视化',
        description: '掌握Python数据分析核心技能，学习NumPy、Pandas等库进行数据处理与可视化。',
        teacher: '王志远',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/709a68eec6f0700a6b23fa7a45901727.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/b27ccede1df651637356441253b99930.jpg',
        students: 1234,
        price: 1999,
        duration: '32课时',
        category: '人工智能'
    },
    {
        id: 2,
        title: '云计算架构师课程',
        description: '深入理解云计算架构，掌握AWS、阿里云等云平台的核心技术与应用场景。',
        teacher: '李明珠',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/04a1d2ae54b0977d982d26341c67cb58.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/fd35a5b94af881b676dbd305a809f634.jpg',
        students: 856,
        price: 3599,
        duration: '40课时',
        category: '后端开发'
    },
    {
        id: 3,
        title: '移动应用开发实战',
        description: '学习iOS和Android应用开发，掌握Flutter跨平台开发技术，打造高性能移动应用。',
        teacher: '张晓峰',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/13a5df8738cf4a2a44f3ad27fa647fa9.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/cf5cbe61f8591442f32ab72012da6e71.jpg',
        students: 2156,
        price: 2499,
        duration: '36课时',
        category: '前端开发'
    },
    {
        id: 4,
        title: '大数据处理与分析',
        description: '学习Hadoop、Spark等大数据处理框架，掌握数据挖掘与分析技能。',
        teacher: '刘雨薇',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/a3779f3f27bef68f58be8debfdd303ac.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/c9122a8e69e853b99acf3e89fed01ed7.jpg',
        students: 1876,
        price: 2899,
        duration: '44课时',
        category: '人工智能'
    },
    {
        id: 5,
        title: '网络安全专家课程',
        description: '系统学习网络安全知识体系，掌握渗透测试、漏洞修复等专业技能。',
        teacher: '陈思远',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/54b4075ba6c564464cd89e5d1711a5b9.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/fe9a4eb925d7ea61d626235cb83e6f71.jpg',
        students: 945,
        price: 3299,
        duration: '40课时',
        category: '后端开发'
    },
    {
        id: 6,
        title: 'UI/UX设计进阶',
        description: '学习用户体验设计原则，掌握Figma等设计工具，提升产品设计能力。',
        teacher: '林清华',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/ed3e8d652e33587864dc924e5fe55dfd.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/1bef70f679eee827ed5fc8994d5edf1c.jpg',
        students: 1543,
        price: 2799,
        duration: '30课时',
        category: '前端开发'
    },
    {
        id: 7,
        title: '企业级Java开发',
        description: '全面掌握Java企业级开发技术栈，包括Spring、Spring Boot、MyBatis等框架。',
        teacher: '赵建国',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/c8aa3fe2608d1f91ba602fb1a035cb54.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/e1fc357146cf6d9b6f1cf3ec86ca2948.jpg',
        students: 2234,
        price: 3999,
        duration: '50课时',
        category: 'Java开发'
    },
    {
        id: 8,
        title: 'DevOps实践与工具',
        description: '学习CI/CD流程，掌握Docker、Kubernetes等容器化技术与自动化部署工具。',
        teacher: '孙玮琦',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/74797f3082e1a128da2a7f689363276a.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/f0ac68894083cd0aca328bf79b9cd9e4.jpg',
        students: 1122,
        price: 2699,
        duration: '38课时',
        category: '后端开发'
    },
    {
        id: 9,
        title: '数据结构与算法',
        description: '深入理解数据结构与算法设计，提升编程思维与代码优化能力。',
        teacher: '徐学文',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/082efae4710bcd1a2c2ee6187245ff3c.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/4be90b1adf9980e712346d33112e98b9.jpg',
        students: 3211,
        price: 2199,
        duration: '34课时',
        category: '后端开发'
    },
    {
        id: 10,
        title: 'MySQL高级应用与优化',
        description: '学习MySQL高级特性，掌握数据库设计、查询优化与性能调优技能。',
        teacher: '周思远',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/54b4075ba6c564464cd89e5d1711a5b9.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/fe9a4eb925d7ea61d626235cb83e6f71.jpg',
        students: 1456,
        price: 2499,
        duration: '32课时',
        category: '数据库'
    },
    {
        id: 11,
        title: 'Redis高性能缓存技术',
        description: '深入学习Redis原理与应用，掌握缓存设计、集群部署与性能优化。',
        teacher: '吴伟',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/74797f3082e1a128da2a7f689363276a.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/f0ac68894083cd0aca328bf79b9cd9e4.jpg',
        students: 987,
        price: 2799,
        duration: '28课时',
        category: '数据库'
    },
    {
        id: 12,
        title: 'Java微服务架构实战',
        description: '学习Spring Cloud微服务架构，掌握服务注册发现、配置中心、网关等技术。',
        teacher: '赵建国',
        teacherAvatar: 'https://ai-public.mastergo.com/ai/img_res/c8aa3fe2608d1f91ba602fb1a035cb54.jpg',
        image: 'https://ai-public.mastergo.com/ai/img_res/e1fc357146cf6d9b6f1cf3ec86ca2948.jpg',
        students: 1765,
        price: 3699,
        duration: '42课时',
        category: 'Java开发'
    }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(6);

// 计算属性：根据分类筛选课程
const filteredCourses = computed(() => {
    let filtered = courses.value;
    
    // 按分类筛选
    if (selectedCategory.value !== 'all') {
        filtered = filtered.filter(course => {
            const categoryMap = {
                'frontend': '前端开发',
                'ai': '人工智能',
                'database': '数据库',
                'backend': '后端开发',
                'java': 'Java开发'
            };
            return course.category === categoryMap[selectedCategory.value];
        });
    }
    
    // 按排序方式排序
    switch (sortType.value) {
        case 'priceAsc':
            return filtered.sort((a, b) => a.price - b.price);
        case 'priceDesc':
            return filtered.sort((a, b) => b.price - a.price);
        case 'students':
            return filtered.sort((a, b) => b.students - a.students);
        default:
            return filtered;
    }
});

// 计算属性：根据分类筛选推荐课程
const filteredRecommendedCourses = computed(() => {
    if (selectedCategory.value === 'all') {
        return recommendedCourses.value;
    }
    
    const categoryMap = {
        'frontend': '前端开发',
        'ai': '人工智能',
        'database': '数据库',
        'backend': '后端开发',
        'java': 'Java开发'
    };
    
    return recommendedCourses.value.filter(course => 
        course.category === categoryMap[selectedCategory.value]
    );
});

onMounted(() => {
    const data = {
        page: currentPage.value,
        pagesize: pageSize.value
    }
    // 调用API获取数据
    // getAll(data)
    // getComment(data)
});

// 原有的函数保持不变
function getAll(data) {
    getAllcourse(data).then(function (response) {
        courses.value = response.items[0]
    })
}

function getComment(data) {
    getAllcourse(data).then(function (response) {
        const items = response.items[0];
        if (Array.isArray(items) && items.length > 0) {
            const indices = [];
            while (indices.length < 3) {
                const randomIndex = Math.floor(Math.random() * items.length);
                if (!indices.includes(randomIndex)) {
                    indices.push(randomIndex);
                }
            }
            recommendedCourses.value = indices.map(index => items[index]);
        } else {
            recommendedCourses.value = items;
        }
    })
}

function jump(id) {
    router.push({
        path: '/courseMessage',
        query: {
            id: id
        }
    })
}

const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
};
</script>

<style scoped>
.mySwiper {
    padding-bottom: 3rem;
}

/* 自定义分页样式 */
:deep(.el-pagination) {
    .el-pager li {
        border-radius: 4px;
        margin: 0 2px;
    }
    
    .btn-prev, .btn-next {
        border-radius: 4px;
    }
    
    .el-pager li.active {
        background-color: #3b82f6;
        color: white;
    }
}
</style>